<!-- Cart Area -->
<div class="dropdown nav-item mini-cart" data-v-component-cart>
	
	<a class="dropdown-toggle cart-info nav-link " href role="button" id="cart-dropdown" data-bs-toggle="dropdown" aria-expanded="false" data-v-url="cart/cart/index">
		<!-- <img src="img/bag.svg" width="20" alt> -->
		<i class="la la-lg la-shopping-bag"></i><span class="visually-hidden">Cart</span>
		<strong class="text-top text-bold" data-v-total_items data-v-if="cart.total_items > 0"></strong>
	</a>
					
					
	<div class="dropdown-menu dropdown-menu-end cart-box" aria-labelledby="cart-dropdown">					

	<div>
        <div class="table-responsive">
			<table class="table cart-table align-middle mb-0">
				<tbody>
					
					
					<tr data-v-cart-product>
						<td class="text-center">
							<a href="#40" data-v-cart-product-url>
								<img src="img/demo/product.jpg" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
							</a>
						</td>
						<td class="text-start">
							<a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
								Product name
							</a>
							
							<span data-v-cart-product-quantity>1</span> 
							<i class="la la-times text-muted"></i>
							<span data-v-cart-product-price_tax_formatted>$123.20</span>

							<div class="option" data-v-if="product.option">
								<div class="" data-v-product-option>
									<span data-v-product-option-option>Color</span>: <span data-v-product-option-name>Red</span> <span data-v-if="value.price">(<span data-v-product-option-price></span>)</span>
								</div>
								<div class="" data-v-product-option>
									<span data-v-product-option-option>Size</span>: <span data-v-product-option-name>XL</span> <span data-v-if="value.price">(<span data-v-product-option-price></span>)</span>
								</div>
								<div class="" data-v-product-option>
									<span data-v-product-option-option>Material</span>: <span data-v-product-option-name>Wool</span> <span data-v-if="value.price">(<span data-v-product-option-price></span>)</span>
								</div>
							</div>
							
							<div class="subscription" data-v-if="product.subscription">
								<span data-v-product-subscription-name>Subscription plan</span>
							</div>
						</td>
						<td class="text-end">
							<a  class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
								<i class="la la-times"></i>
							</a>
						</td>
					</tr>
					<tr data-v-cart-product>
						<td class="text-center">
							<a href="#40" data-v-cart-product-url>
								<img src="img/demo/product.jpg" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
							</a>
						</td>
						<td class="text-start">
							<a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
								Product name
							</a>
							
							<span data-v-cart-product-quantity>1</span> 
							<i class="la la-times text-muted"></i>
							<span data-v-cart-product-price_tax_formatted>$123.20</span>
							
							
						</td>
						<td class="text-end">
							<a  class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
								<i class="la la-times"></i>
							</a>
						</td>
					</tr>
					<tr data-v-if-not="cart.total_items">
							<td colspan="100">
								<div class="d-flex  p-2">
									<div class="text-center p-2 opacity-75">
										<!-- <img src="img/bag.svg" width="20" alt> -->
										<i class="la la-2x la-shopping-bag"></i>
									</div>
									<div class="p-2">
										<strong>Empty cart</strong><br>
										<span class="text-muted">No products added yet!</span>
									</div>
								</div>
							</td>
					</tr>
				 </tbody>

		  </table>
		  </div>
		  
		  <div class="p-3 pt-0 border-top" data-v-if="cart.total_items">
				<div class="table-responsive mb-2" data-v-cart-totals>
					<table class="table mb-0 cart-table cart-total" cellspacing="0">
						  <tfoot>
							  <tr data-v-cart-total>
								 <td colspan="5" class="text-end"><small data-v-cart-total-title>Sub-Total</small>:</td>
								 <td class="text-end">
									<span data-v-cart-total-text data-v-if="total.text"> - </span>
									<span data-v-cart-total-value_formatted data-v-if="total.value > 0">$101.00</span>
								 </td>
							  </tr>
							  <tr data-v-cart-total>
								 <td colspan="5" class="text-end"><small>Eco Tax (2.00):</small></td>
								 <td class="text-end">$2.00</td>
							  </tr>
							  <tr data-v-cart-total>
								 <td colspan="5" class="text-end"><small>VAT (19%):</small></td>
								 <td class="text-end">$20.20</td>
							  </tr>
							  <tr data-v-cart-total>
								 <td colspan="5" class="text-end"><small>Total:</small></td>
								 <td class="text-end">$123.20</td>
							  </tr> 
							  <tr>
								 <td colspan="5" class="text-end">Total:</td>
								 <td class="text-end" data-v-grand-total_formatted>$0</td>
							  </tr>
						   </tfoot>

						</table>
				</div>

		</div>

	  <div class="row mt-2 g-2 px-3 pb-2" data-v-if="cart.total_items">
		<div class="col-6">
			<a href="" class="btn btn-light btn-sm border w-100" data-v-url="cart/cart/index">
				<i class="la la-shopping-cart la-lg"></i><span>View cart</span>
			</a>
		  </div>
		  <div class="col-6">
			<a href="" class="btn btn-primary btn-sm w-100" data-v-url="checkout/checkout/index">
				<span>Checkout</span><i class="la la-arrow-right la-lg"></i>
			</a>
		  </div>
	  </div>


	</div>
	</div>
		
</div>
